// 商品分类

<template>
  <div>
    <Row class="page">
      <Col span="24">
      <Modal v-model="modelDel" title="提醒" @on-ok="delok" @on-cancel="delcancel">
        <p>是否删除此商品，点击确定删除，点击取消不删除！</p>
      </Modal>
      <Button type="primary" icon="plus-round" @click="modal1 = true">添加商品</Button>
      <Modal v-model="modal1" title="添加商品" @on-ok="ok" @on-cancel="cancel">
        <Form ref="groupGoods" :model="groupGoods" :label-width="100">
          <FormItem label="商品名称">
            <Input v-model="groupGoods.name" placeholder="商品名称"></Input>
          </FormItem>
          <FormItem label="商品介绍">
            <Input v-model="groupGoods.description" placeholder="商品介绍"></Input>
          </FormItem>
          <FormItem label="商品价格">
            <Input v-model="groupGoods.price" placeholder="商品价格"></Input>
          </FormItem>
          <!-- <FormItem label="拼团价格">
            <Input v-model="groupGoods.group_price" placeholder="拼团价格"></Input>
          </FormItem> -->
          <FormItem label="商品库存">
            <Input v-model="groupGoods.stock" placeholder="商品库存"></Input>
          </FormItem>
          <FormItem label="是否上架">
            <!-- <Switch v-model="is_sale" @on-change="is_sale" /> -->
            <i-switch v-model="is_sale" @on-change="issale" />
          </FormItem>
          <FormItem label="选择分类">
            <Select v-model="classid" placeholder="请选择分类" @on-change="classList">
              <Option :value="listitem.id" v-for="listitem in lists" :key="listitem.id">{{listitem.name}}</Option>
            </Select>
          </FormItem>
          <FormItem v-for="(item, index) in group_goods_spec.items" :key="index" :label="'规格'+Number(index+1)">
            <Row>
              <Col span="18">
              <Col span="24"> <Input span="4" type="text" v-model="item.spce_name" placeholder="规格名称"></Input></Col>
              <Col span="8"> <Input span="4" type="text" v-model="item.number" placeholder="规格库存"></Input></Col>
              <Col span="8"><Input span="4" type="text" v-model="item.price" placeholder="单独价格"></Input></Col>
              <Col span="8"><Input span="4" type="text" v-model="item.group_price" placeholder="拼团价格"></Input></Col>
              </Col>
              <Col span="4" offset="1">
              <Button @click="handleRemove(index)">删除</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem>
            <Row>
              <Col span="12">
              <Button type="dashed" long @click="handleAdd" icon="plus-round">增加规格</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="缩略图">
            <Upload action="http://upload-z2.qiniup.com" :data="tupdata" :on-success="files" :default-file-list="dlist" :on-progress="upfile" :on-remove="removeFiles" :on-error="error">
              <Button icon="ios-cloud-upload-outline">上传商品焦点图500 * 500px</Button>
            </Upload>
          </FormItem>
          <FormItem label="商品焦点图">
            <Upload action="http://upload-z2.qiniup.com" :data="tupdata" :on-success="filess" :default-file-list="dlist" :on-progress="upfile" :on-remove="removeFiles" :on-error="error">
              <Button icon="ios-cloud-upload-outline">上传商品焦点图500 * 500px</Button>
            </Upload>
            <Upload action="http://upload-z2.qiniup.com" :data="tupdata" :on-success="filess" :default-file-list="dlist" :on-progress="upfile" :on-remove="removeFiles" :on-error="error">
              <Button icon="ios-cloud-upload-outline">上传商品焦点图500 * 500px</Button>
            </Upload>
            <Upload action="http://upload-z2.qiniup.com" :data="tupdata" :on-success="filess" :default-file-list="dlist" :on-progress="upfile" :on-remove="removeFiles" :on-error="error">
              <Button icon="ios-cloud-upload-outline">上传商品焦点图500 * 500px</Button>
            </Upload>
          </FormItem>
          <FormItem label="详情图">
            <Upload action="http://upload-z2.qiniup.com" :data="tupdata" :on-success="filesss" :default-file-list="dlist" :on-progress="upfile" :on-remove="removeFiles" :on-error="error">
              <Button icon="ios-cloud-upload-outline">上传商品焦点图宽度500px</Button>
            </Upload>
          </FormItem>
        </Form>
      </Modal>
      </Col>
    </Row>
    <br>
    <Row class="page">
      <Col span="24">
      <Table border :columns="columns7" :data="data6"></Table>
      </Col>
    </Row>
    <br>
    <Row>
      <Page :total="100" @on-change="pages" />
    </Row>
  </div>
</template>

<script type="text/ecmascript-6">
import expandRow from "./table-expand";
export default {
  components: { expandRow },
  data() {
    return {
      modelDel: false,
      delOrderId: "",
      dlist: [],
      tupdata: {
        key: Date.parse(new Date()) + ".jpg",
        token: ""
      },
      workType: 1,
      classid: "",
      imgss: [],
      lists: [],
      index: 1,
      group_goods_spec: {
        items: [
          {
            spce_name: "", //规格名称
            number: "", //规格商品数量
            is_show: "1", //是否显示
            price: "", //规格单独价格
            group_price: "", //规格拼团价格}
            create_user: "root"
          }
        ]
      },
      groupGoods: {
        name: "", //商品名称
        price: "", //商品价格
        stock: "", //商品库存
        description: "", //商品描述
        content: "", //商品详情
        thumbnails: "", //商品缩略图
        imgs: "", //商品轮播图
        is_sale: "", //是否上架
        class_id: "", //商品分类
        create_user: "root" //上传人
      },
      is_sale: false,
      modal1: false,
      columns7: [
        {
          title: "展开",
          key: "id",
          width: 65,
          sortable: true,
          type: "expand",
          render: (h, params) => {
            console.log(params);
            return h(expandRow, {
              props: {
                row: params.row.id
              }
            });
            // return h("div", [h("strong", params.row.id)]);
            // $.ajax({
            //   url:
            //     "http://47.94.147.120:8080/fight/api/v1.0/goods/groupGoodsSpecs",
            //   type: "get",
            //   data: {
            //     goodsId: params.row.id
            //   },
            //   success: function(data) {
            //     console.log(data);
            //     return h(expandRow, {
            //       props: {
            //         row: 1
            //       }
            //     });
            //   }
            // });
          }
        },
        {
          title: "id",
          key: "id",
          width: 80
        },
        {
          title: "商品名称",
          key: "name",
          render: (h, params) => {
            // console.log(params);

            return h("div", [h("strong", params.row.name)]);
          }
        },
        {
          title: "商品分类",
          key: "class_id",
          width: 110,
          render: (h, params) => {
            let _self = this;
            // console.log(params);

            let classid = params.row.class_id;
            // return _self.lists[classid].name;
            let obj = _self.lists.find(function(x) {
              return x.id === classid;
            });
            return obj.name;
          },
          sortable: true
        },
        {
          title: "商品价格",
          key: "price",
          width: 110,
          sortable: true
        },
        {
          title: "上架",
          key: "is_sale",
          width: 80,
          render: (h, params) => {
            if (params.row.is_sale == 1) {
              return "上架";
            } else {
              return "未上架";
            }
          }
        },
        {
          title: "库存",
          key: "stock",
          width: 100,
          sortable: true
        },
        {
          title: "商品描述",
          key: "description"
        },
        {
          title: "发布时间",
          key: "create_datetime",
          sortable: true,
          width: 150
        },
        {
          title: "操作",
          // key: "caozuo",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      // this.remove(params.index);
                      let _self = this;
                      _self.modelDel = true;
                      // _self.delWork(params.row.id)
                      _self.delOrderId = params.row.id;
                      // $.ajax({
                      //   url: BASE_URL + "goodsmanagement/delete",
                      //   type: "get",
                      //   data: {
                      //     id: params.row.id
                      //   },
                      //   success: function(e) {
                      //     console.log(e);
                      //     _self.$Message.info("删除成功");
                      //     _self.getWorkList();
                      //   }
                      // });
                    }
                  }
                },
                "删除"
              ),
              h(
                "Button",
                {
                  style: {
                    marginLeft: "10px"
                  },

                  on: {
                    click: () => {
                      let _self = this;
                      $.ajax({
                        url: BASE_URL + "goodsmanagement/edit",
                        type: "get",
                        data: {
                          id: params.row.id
                        },
                        success: function(e) {
                          _self.workType = 2;
                          console.log(e);
                          _self.groupGoods = e.goods;
                          _self.workId = e.goods.id;
                          _self.imgsss = e.goods.imgs;
                          if (e.goods.is_sale == 1) {
                            _self.is_sale = true;
                          } else {
                            _self.is_sale = false;
                          }
                          _self.lists[1].name;
                          _self.group_goods_spec.items = e.spec;
                          _self.modal1 = true;
                        }.bind(this)
                      });
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      data6: [],
      value: "",
      imgsss: "",
      workId: ""
    };
  },
  created() {
    this.getToken();
    this.getClassList();
    // this.getWorkList();
    this.pages(1);
  },
  methods: {
    delWork: function(orderid) {
      let _self = this;
      $.ajax({
        url: BASE_URL + "goodsmanagement/delete",
        type: "get",
        data: {
          id: orderid
        },
        success: function(e) {
          console.log(e);
          _self.$Message.info("删除成功");
          _self.getWorkList();
        }.bind(this)
      });
    },
    delok: function() {
      let _self = this;
      _self.delWork(this.delOrderId);
    },
    upfile: function() {
      this.getToken();
      this.tupdata.key = Date.parse(new Date()) + ".jpg";
    },
    removeFiles: function() {
      this.getToken();
      this.tupdata.key = Date.parse(new Date()) + ".jpg";
    },
    getToken: function() {
      let _self = this;
      $.ajax({
        url: BASE_URL + "upload/token",
        type: "get",
        success: function(e) {
          _self.tupdata.token = e;
        }.bind(this)
      });
    },
    error: function(response, file, fileList) {
      console.log(response, file, fileList);
    },
    files: function(res, file) {
      console.log(file);
      console.log("http://img.28nianji.com/" + res.key);
      this.groupGoods.thumbnails = IMAGE_URL+'/' + res.key;
    },
    filess: function(res, file, fileList) {
      console.log(file);
      console.log(fileList);
      console.log("http://img.28nianji.com/" + res.key);
      this.imgss.push(IMAGE_URL+'/' + res.key);
    },

    filesss: function(res, file) {
      console.log(file);
      console.log("http://img.28nianji.com/" + res.key);
      this.groupGoods.content = IMAGE_URL+'/' + res.key;
    },

    // description
    pages: function(e) {
      console.log(e);
      let _self = this;
      $.ajax({
        url: BASE_URL + "goodsmanagement/groupGoodsClassPage",
        type: "get",
        data: {
          pageNumber: e,
          pageSize: 10
        },
        success: function(data) {
          console.log(data);
          _self.data6 = data.list;
        }.bind(this)
      });
    },
    gex: function() {},
    handleAdd() {
      let _self = this;
      this.index++;
      this.group_goods_spec.items.push({
        goods_id: _self.groupGoods.id,
        spce_name: "", //规格名称
        number: "", //规格商品数量
        is_show: "1", //是否显示
        price: "", //规格单独价格
        group_price: "", //规格拼团价格}
        create_user: "root"
      });
    },
    issale: function(is_sale) {
      console.log();
      if (this.is_sale) {
        this.groupGoods.is_sale = 1;
      } else {
        this.groupGoods.is_sale = 0;
      }
      //
    },
    ok() {
      let _self = this;
      if (_self.workType == 1) {
        // _self.groupGoods.imgs = JSON.stringify(_self.imgss)
        // console.log(_self.groupGoods.imgs)
        _self.groupGoods.imgs = this.imgss.join(",");
        $.ajax({
          url: BASE_URL + "goodsmanagement",
          type: "POST",
          data: {
            groupGoods: JSON.stringify(_self.groupGoods),
            groupGoodsSpecs: JSON.stringify(_self.group_goods_spec.items)
          },
          success: function(res) {
            console.log(res);
            _self.$Message.success("添加成功");
            _self.getWorkList();
            this.imgss = "";
            _self.group_goods_spec.items = [
              {
                spce_name: "", //规格名称
                number: "", //规格商品数量
                is_show: "1", //是否显示
                price: "", //规格单独价格
                group_price: "", //规格拼团价格}
                create_user: "root"
              }
            ];

            _self.groupGoods = {
              name: "", //商品名称
              price: "", //商品价格
              stock: "", //商品库存
              description: "", //商品描述
              content: "", //商品详情
              thumbnails: "", //商品缩略图
              imgs: "", //商品轮播图
              is_sale: "", //是否上架
              class_id: "", //商品分类
              create_user: "root" //上传人
            };
          }
        });
      }
      if (_self.workType == 2) {
        console.log(_self.groupGoods, this.group_goods_spec.items);
        _self.groupGoods.imgs = _self.imgsss;
        _self.groupGoods.id = _self.workId;
        console.log(this.group_goods_spec.items);
        // if (this.group_goods_spec.items.length > 1) {
        //   console.log("sdfg")
        //   for (var i = 1; i < this.group_goods_spec.items.length; i++) {
        //    this.group_goods_spec.items[i].spce_id=this.group_goods_spec.items[0].spce_id
        //   }
        // }
        $.ajax({
          url: BASE_URL + "goodsmanagement/update",
          type: "get",
          data: {
            groupGoods: JSON.stringify(_self.groupGoods),
            groupGoodsSpecs: JSON.stringify(_self.group_goods_spec.items)
          },
          success: function(res) {
            console.log(res);
            _self.getWorkList();
            _self.group_goods_spec.items = {
              spce_name: "", //规格名称
              number: "", //规格商品数量
              is_show: "1", //是否显示
              price: "", //规格单独价格
              group_price: "", //规格拼团价格}
              create_user: "root"
            };

            _self.groupGoods = {
              name: "", //商品名称
              price: "", //商品价格
              stock: "", //商品库存
              description: "", //商品描述
              content: "", //商品详情
              thumbnails: "", //商品缩略图
              imgs: "", //商品轮播图
              is_sale: "", //是否上架
              class_id: "", //商品分类
              create_user: "root" //上传人
            };
          }
        });
      }
    },
    cancel() {
      this.$Message.info("Clicked cancel");
    },
    delcancel: function() {},
    getWorkList: function() {
      $.ajax({
        url: BASE_URL + "goodsmanagement",
        type: "get",
        success: function(data) {
          console.log(data);
          this.data6 = data;
        }.bind(this)
      });
    },
    getClassList: function() {
      $.ajax({
        url: BASE_URL + "sortmanagement",
        type: "get",
        success: function(res) {
          console.log(res);
          if (res) {
            this.lists = res;
          }
        }.bind(this)
      });
    },
    classList: function(classid) {
      this.groupGoods.class_id = classid;
    }
  }
};
</script>

<style scoped>
</style>
